<template>
    <div id="big">
        <div id="neiRong">
            <el-table :data="table.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%">
                <el-table-column type="index" label="序号" style="width: 20%" align="center" />
                <el-table-column prop="operationTime" label="操作流程" style="width: 20%" align="center" />
                <el-table-column prop="organization" label="组织" style="width: 20%" align="center" />
                <el-table-column prop="operator" label="操作人" style="width: 20%" align="center" />
                <el-table-column prop="operationContent" label="操作内容" style="width: 20%" align="center" />
            </el-table>
        </div>
    </div>
    <div id="fenye" class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="table.length" @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1" />
        </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, toRefs } from 'vue';
import axios from '@/util/http'

export default defineComponent({
    setup() {
        const tableData = [
            {
                xuhao: '1',
                time: '2020-11-11 15:00',
                zuzhi: '流调疾控中心',
                caozuoren: '系统',
                caozuoneirong: '登录系统'
            },
            {
                xuhao: '2',
                time: '2020-11-11 15:00',
                zuzhi: '流调疾控中心',
                caozuoren: '张三',
                caozuoneirong: '登录系统'
            },
            {
                xuhao: '3',
                time: '2020-11-11 15:00',
                zuzhi: '流调疾控中心',
                caozuoren: '李四',
                caozuoneirong: '登录系统'
            },
            {
                xuhao: '4',
                time: '2020-11-11 15:00',
                zuzhi: '流调疾控中心',
                caozuoren: '王五',
                caozuoneirong: '登录系统'
            },
            {
                xuhao: '5',
                time: '2020-11-11 15:00',
                zuzhi: '流调疾控中心',
                caozuoren: '赵六',
                caozuoneirong: '登录系统'
            },
        ]
        //数据拿取
        let Table = reactive({
            table: []
        })
        onMounted(() => {
            axios({
                method: 'get', url: '/log/queryAllLogsByPage', params: {
                    currentPage: 1,
                    pageSize: 1000
                }
            }).then((res) => {
                // console.log("成功");
                // console.log(res.data.data);
                Table.table = res.data.data
                // console.log(Table.table);
                // Table.table.forEach(element => {
                //     element.createDate
                // });
            })
        })

        const currentPage = ref(1)
        const pageSize = ref(10)
        const small = ref(false)
        const background = ref(false)
        const disabled = ref(false)
        const handleSizeChange1 = (val: number) => {
            console.log(`${val} items per page`)
        }
        const handleCurrentChange1 = (val: number) => {
            console.log(`current page: ${val}`)
        }
        return {
            tableData,
            Table,
            ...toRefs(Table),
            currentPage,
            pageSize,
            small,
            background,
            disabled,
            handleSizeChange1,
            handleCurrentChange1,
        }
    }
})

</script>

<style scoped>
#big {
    width: 100%;
    margin-top: 20px;
    font-size: 13px;
    color: #333;
}

#neiRong {
    padding: 20px;
    background-color: white;
}
#fenye {
    padding: 10px 35px;
    display: flex;
    justify-content: end;
    background-color: white;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>